<template>
  <ele-page flex-table>
    <!-- 搜索表单 -->
    <PageSearch :supplierList @search="reload" />

    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        v-model:selections="selections"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="false"
        highlight-current-row
        cache-key="TransferDiffTable"
      >
        <template #toolbar>
          <!-- <el-button :disabled="selections.length !== 1" @click="onCommand('EDIT')">编辑</el-button>
          <el-divider direction="vertical" />
          <el-button :disabled="selections.length !== 1" @click="onCommand('YC')">结单</el-button> -->

          <!-- <el-dropdown class="mx-15px" split-button :disabled="btnDisabled(selections, 'is_sh')" @click="onCommand('SH')" @command="onCommand">
            审核
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="YS">审核通过</el-dropdown-item>
                <el-dropdown-item command="NS">审核不通过</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-button :disabled="btnDisabled(selections, 'is_fs')" @click="onCommand('FS')">反审</el-button>
          <el-button :disabled="btnDisabled(selections, 'is_ok')" @click="onCommand('OK')">结单</el-button>
          <el-button :disabled="btnDisabled(selections, 'is_cd')" @click="onCommand('CD')">取消</el-button> -->
        </template>

        <template #order_sn="{ row }">
          <ele-copyable :text="row.order_sn">
            <el-link type="primary" @click="openPageTab(`/transfer/diff/info/${row.id}`)">{{ row.order_sn }}</el-link>
          </ele-copyable>
        </template>
        <template #ot_sn="{ row }">
          <ele-copyable :text="row.ot_sn">
            <el-link type="primary" @click="openPageTab(`/transfer/index/info/${row.ot_id}`)">{{ row.ot_sn }}</el-link>
          </ele-copyable>
        </template>
        <template #oe_sn="{ row }">
          <ele-copyable :text="row.out_sn">
            {{ row.out_sn }}
          </ele-copyable>
          <ele-copyable :text="row.enter_sn">
            {{ row.enter_sn }}
          </ele-copyable>
        </template>
        <template #oe_warehouse="{ row }">
          <div><el-tag round type="warning" size="small" class="mr-5px">出</el-tag>{{ row.out_warehouse_name }}</div>
          <div><el-tag round type="success" size="small" class="mr-5px">入</el-tag>{{ row.enter_warehouse_name }}</div>
        </template>
        <template #oe_num="{ row }">
          <div>{{ row.out_num }}</div>
          <div>{{ row.enter_num }}</div>
        </template>
        <template #new_oe_num="{ row }">
          <div class="text-primary font-bold">{{ row.new_out_num }}</div>
          <div class="text-primary font-bold">{{ row.new_enter_num }}</div>
        </template>
        <template #status="{ row }">
          <el-tag :type="getType(row.status)">{{ row.status_name }}</el-tag>
        </template>
        <template #action="{ row }">
          <!-- <template v-if="row.is_ok">
            <el-link type="primary" underline="never" @click="onCommand('YC', row)">结单</el-link>
            <el-divider direction="vertical" />
          </template>
          <template v-if="row.is_edit">
            <el-link type="primary" underline="never" @click="onCommand('EDIT', row)">编辑</el-link>
            <el-divider direction="vertical" />
          </template> -->
          <el-link type="primary" underline="never" @click="onCommand('INFO', row)">
            <ele-dot v-if="row.is_ok === 1" type="danger" ripple text="详情" />
            <span v-else>详情</span>
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>
  </ele-page>
</template>

<script setup>
import { listSupplier } from '@/api/common'
import { getType } from '@/utils'
import { Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'
import PageSearch from './components/search.vue'

defineOptions({ name: 'TransferDiff' })

const [supplierList] = utils.useGetList(listSupplier)

/** 表格实例 */
const tableRef = ref(null)

const router = useRouter()

const { addPageTab } = utils.usePageTab()

/** 表格选中数据 */
const selections = ref([])

const { btnDisabled } = utils

// 激活页面刷新table
utils.useActivatedReload(() => tableRef.value?.reload?.())

const showReview = ref(false)
const current = ref(null)

/** 表格列配置 */
const columns = ref([
  // {
  //   type: 'selection',
  //   columnKey: 'selection',
  //   width: 40,
  //   align: 'center',
  //   fixed: 'left',
  //   showOverflowTooltip: false,
  // },
  {
    type: 'index',
    label: '序',
    width: 50,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'order_sn',
    label: '调拨异常单',
    width: 200,
    align: 'left',
    slot: 'order_sn',
  },
  {
    prop: 'ot_sn',
    label: '调拨单',
    width: 200,
    align: 'left',
    slot: 'ot_sn',
  },
  {
    prop: 'out_sn',
    label: '出入库单',
    width: 200,
    align: 'left',
    slot: 'oe_sn',
  },
  {
    prop: 'out_warehouse_name',
    label: '出入库仓',
    width: 160,
    align: 'center',
    slot: 'oe_warehouse',
  },
  {
    columnKey: 'num',
    label: '出入库数量',
    align: 'center',
    children: [
      {
        columnKey: 'oe_num',
        label: '调整前',
        align: 'center',
        width: 100,
        slot: 'oe_num',
      },
      {
        columnKey: 'new_oe_num',
        label: '调整后',
        align: 'center',
        width: 100,
        slot: 'new_oe_num',
      },
    ],
  },
  {
    prop: 'diff_num',
    label: '差异数量',
    width: 100,
    align: 'center',
  },
  // {
  //   prop: 'out_warehouse_name',
  //   label: '发货仓库',
  //   minWidth: 100,
  //   align: 'center',
  // },
  // {
  //   prop: 'out_num',
  //   label: '发货数量',
  //   align: 'center',
  //   width: 100,
  // },
  // {
  //   prop: 'enter_warehouse_name',
  //   label: '收货仓库',
  //   minWidth: 100,
  //   align: 'center',
  // },
  // {
  //   prop: 'enter_num',
  //   label: '收货数量',
  //   align: 'center',
  //   width: 100,
  // },
  {
    prop: 'status_name',
    slot: 'status',
    label: '订单状态',
    align: 'center',
    width: 100,
  },
  {
    prop: 'remark',
    showOverflowTooltip: true,
    label: '备注',
    align: 'center',
    width: 120,
  },
  {
    prop: 'create_user_name',
    showOverflowTooltip: true,
    label: '创建人',
    align: 'center',
    width: 120,
  },
  {
    prop: 'create_time',
    label: '创建时间',
    formatter: (row) => {
      return utils.formatDate(row.create_time)
    },
    align: 'center',
    width: 160,
    showOverflowTooltip: false,
  },
  {
    columnKey: 'action',
    label: '操作',
    align: 'right',
    slot: 'action',
    fixed: 'right',
    showOverflowTooltip: false,
    width: 80,
  },
])

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  return utils.get('/transfer/diff', { ...where, ...orders, page, limit })
}

/** 搜索 */
function reload(where) {
  selections.value = []
  tableRef.value?.reload?.({ page: 1, where })
}

function updateStatus(formData, cb) {
  const loading = utils.message('请求中..', 'loading')
  utils.post('/transfer/diffReview', formData).then((res) => {
    utils.message(res.msg, res.success)
    if (res.success) {
      reload()
      showReview.value = false
    }
  }).finally(() => {
    cb && cb()
    loading.close()
  })
}

function onCommand(command, row) {
  current.value = row?.id ? row : null
  const ids = row?.id ? [row.id] : selections.value.map(v => v.id)
  if (command === 'INFO' || command === 'EDIT') {
    const data = current.value ?? selections.value[0]
    openPageTab(`/transfer/diff/${command.toLowerCase()}/${data.id}`)
  }
  else if (command === 'YC') {
    const opts = {
      type: 'warning',
      dangerouslyUseHTMLString: true,
    }
    utils.confirm(`确定要<span class="px-2px text-danger font-semibold">结单</span>订单吗`, '系统提示', opts).then(() => {
      const formData = {
        id: ids,
        status: command,
      }
      updateStatus(formData)
    })
  }
}

function openPageTab(path) {
  addPageTab({
    key: path,
    closable: true,
  })
  router.push(path)
}
</script>
